<template>
  <div class="pl-48 p-8 flex">
    <div
      class="w-1/6 h-full flex items-center justify-center hover:bg-white/70 cursor-pointer transition-all opacity-0 hover:opacity-100"
      @click="handleClickLeft"
    >
      <Icon name="tabler:chevron-left" class="text-4xl" />
    </div>

    <div class="flex flex-col items-center gap-16 w-2/3 px-8">
      <div class="bg-[#FAE1F1] p-16 rounded-lg text-[rgb(239,133,191)] font-bold text-2xl text-center w-full">
        女性生活
      </div>
      <div class="flex flex-col gap-8">
        <NuxtLink
          v-for="(knowledge, i) in displayKnowledges"
          :key="i"
          :to="`/info/knowledge/${knowledge.id}`"
          class=" cursor-pointer text-2xl"
        >
          {{ knowledge.title }}
        </NuxtLink>
      </div>
    </div>

    <div
      class="w-1/6 h-full flex items-center justify-center hover:bg-white/70 cursor-pointer transition-all opacity-0 hover:opacity-100"
      @click="handleClickRight"
    >
      <Icon name="tabler:chevron-right" class="text-4xl" />
    </div>
  </div>
</template>

<script setup>
const { data: knowledges } = useFetch('/api/knowledge')
const page = ref(0)
const step = 4
const displayKnowledges = computed(() => {
  return knowledges.value.slice(page.value * step, (page.value + 1) * step)
})
function handleClickRight () {
  page.value = Math.min(limit.value, page.value + 1)
}
function handleClickLeft () {
  page.value = Math.max(0, page.value - 1)
}
const limit = computed(() => Math.floor(knowledges.value.length / step))
// ['姑娘，这是一份夏日私处护理知识，请查收！', '一次性内裤真人试穿报告', '千万别再穿它了，危害比你想象的还要大！', '妈妈，我爱你，离开你，变成你···']
</script>
